<template>
  <div class="page_container">
    <p style="color: white;">The screen is supposed to be dark. In this part you need to use visualization to boost your learning.</p>

    <div class="middle_container">
      <!-- 左按钮 -->
      <div class="left_button">
        <el-button type="primary" style="margin:49% 50px;" @click="get_last_question">Previous</el-button>
      </div>
      <div class="question_container">
        <div class="title_container">
          <div class="title" />
          <div class="title_text">{{ form.question_type }}</div>
        </div>
        <div id="number">No.{{ form.question_number }}</div>
        <div id="question">{{ form.question_text }}</div>
        <div id="answer">{{ form.answer_text }}</div>
        <el-input v-model="form.user_answer" class="input" placeholder="Please input your answer here!" />
        <div id="show">{{ form.show }}</div>
        <el-button type="primary" style="margin: 20px 45% 0 45%;" @click="onSubmit">{{ form.button_text }}</el-button>
        <!-- <p>YOUR ANSWER:{{form.user_answer}}</p> -->
      </div>

      <!-- 右按钮 -->
      <div class="right_button">
        <el-button type="primary" style="margin: 49% 100px;" @click="get_next_question">Next</el-button>
      </div>
    </div>

    <div class="progress_container">
      <div class="outside_progress">
        <div class="inside_progress">
          <p style="text-align: right; padding-right: 10px;">{{ form.progress }}%</p>
        </div>
      </div>
      <el-button class="conclude_button">Conclude for now</el-button>
      <el-button class="quit_button">Quit</el-button>
    </div>

    <div class="bottom_container">
      <el-button type="primary" style="margin-left: 200px;">Acculturation</el-button>
      <el-button type="primary">Interaction</el-button>
      <el-button type="primary">Narration</el-button>
      <el-button type="primary">Literacy</el-button>
      <el-button type="primary">Lexis</el-button>
      <el-button type="primary">Syntax</el-button>
      <el-button type="primary">Extended Interaction</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        question_type: 'A_GIVEN_B_CLOZE',
        question_number: '1',
        question_text: 'what are you doing?',
        answer_text: 'I _______(play) computer games.',
        user_answer: '',
        show: '',
        warn: 'you can\'t input null string',
        true_answer: 'am playing',
        counter: '',
        button_text: 'Submit',
        seen: false,
        progress: 59
      }
    }
  },
  methods: {
    // onSubmit() {
    //   if (this.form.user_answer == '')
    //     this.$message('you can\'t not submit null string')
    //   else this.$message(this.form.show)
    // },
    onSubmit() {
      if (this.form.button_text == 'Submit') {
        if (this.form.user_answer == '') {
          this.form.show = this.form.warn
        } else {
          this.form.show = 'The true answer is: ' + this.form.true_answer
          this.form.button_text = 'Next'
        }
      }
      if (this.form.button_text == 'Next') {
        // TODO
        // get next question's data
      }
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    get_next_question() {},
    get_last_question() {}
  }
}

</script>

<style scoped>
.page_container{
  position: relative;
  background: rgb(4,4,4);
  height: 800px;
}
.title_container{
  position: relative;
  width: 300px;
  height: 100px;
  font-size: 0px;
  overflow: hidden;
  margin: 10px 10px;
}
.title{
  position: absolute;
  display: inline-block;
  height: 60px;
  width: 10px;
  margin-left: 10px;
  background: #409EFF;
}
.title_text{
  position: absolute;
  display: inline-block;
  margin-top: 5px;
  margin-left: 20px;
  height: 50px;
  width: 250px;
  color: white;
  background: #1F2D3D;
  font-size: 16pt;
  text-align: center;
  padding: 15px;
}
.middle_container{
  width: 100%;
  height: 60%;
  overflow: hidden;
  position: relative;
}
.left_button{
  position: absolute;
  height: 100%;
  width: 20%;
}
.question_container{
  border: 2px solid white;
  border-radius: 10px;
  position: absolute;
  margin:0px 20%;
  width: 60%;
  height: 100%;
  font-size: 20px;
  color: white;
}
.right_button{
  position: absolute;
  margin-left: 80%;
  height: 60%;
  width: 20%;
}
#number{
  width: 200px;
  height: 30px;
  margin: 0 20px;
}
#question{
  width: 90%;
  height: 30px;
  font-size: 20px;
  margin: 0 30px;
}
#answer{
  width: 90%;
  height: 30px;
  font-size: 20px;
  margin: 0 30px;
}
.input{
  width: 60%;
  margin: 20px 0 0 30px;
}
#show{
  width: 90%;
  height: 50px;
  padding-top: 15px;
  border: 1px solid white;
  margin: 50px 0 0 30px;
  text-align: center;
}
.progress_container{
  width: 100%;
  height: 100px;
  margin: 10px 30px;
  position: relative;
}
.outside_progress{
  margin-top: 20px;
  height: 20px;
  width: 400px;
  border-radius: 10px;
  background: #A13E0D;
}
.inside_progress{
  height: 100%;
  width: 230px;
  border-radius: 10px;
  padding-right: 2px;
  background: #00FF00;
}
.conclude_button{
  position: absolute;
  margin: 0 70%;
}
.quit_button{
  position: absolute;
  margin: 0 90%;
}
.bottom_container{
  width: 100%;
  height: 45px;
  margin: 20px 0 0 0;
  border: 2px solid white;
}
</style>
